/* 
 1 图片上传 即时显示
 2 动态渲染 文章列表下拉框
 3 渲染 layui日期选择器
 4 渲染 富文本编辑器 
 5 点击发布 
   1 获取对应的表单的参数 
   2 拼接成 接口 规定 数据格式 
   3 发送请求 完成新增
   4 返回 文章列表页面 （）
 */
$(function () {
    // 1 发送请求获取文章列表数据 /admin/category/list
    function getCategoryList() {
        $.get('/admin/category/list', function (res) {
            let html = ''
            res.data.forEach(value => {
                html += `<option value="${value.id}">${value.name}</option>`

            })
            $('#category').html(html)
        })
    }

    // 2 初始化日期选择器
    function renderDate() {
        //执行一个laydate实例
        layui.laydate.render({
            elem: '#articleDate' //指定元素
        });
    }
    // 3 初始化文本编辑器
    function renderEditor() {
        tinymce.init({
            selector: '#articleContent',
            language: 'zh_CN',//注意大小写
        });
    }
    // 4 文件上传立即显现功能的实现
    $('#inputCover').change(function () {
        const file = this.files[0]
        $('#coverimg').prop('src', URL.createObjectURL(file))
    })
    // 5  发布按钮实现发布功能
    $('.btn-edit').click(function () {
        postArticle('已发布')
        // const fd = new FormData()
        // // 获取文章标题
        // const title = $("[name = 'title']").val()
        // // 获取图片文件
        // const cover = $("[name = 'cover']")[0].files[0]
        // // 获取文章列表id
        // const categoryId = $("[name = 'categoryId']").val()
        // // 获取日期
        // const date = $("[name = 'date']").val()

        //   小优化
        // const fd = new FormData($('#form')[0])
        // fd.forEach((value, key) => console.log(value, key))
        // FormData($('#form'))[0] 相当于原生 document。queryselector 获取到的原生form对象

        // 获取富文本编辑器的输入内容
        // const content = tinyMCE.editors['articleContent'].getContent()
        // console.log(title)
        // console.log(type)
        // console.log(categoryId)
        // console.log(date)
        // console.log(content)
        // fd.append('title', title)
        // fd.append('cover', cover)
        // fd.append('categoryId', categoryId)
        // fd.append('date', date)
        // fd.append('content', content)
        // fd.append('state', '已发布')
        // // 这个form标签中的 表单组件  
        // // 必须有 name 属性 



        // // 使用FormData上传文件必须要有两个基本配置       contentType:false,
        // // processData: false, 简写方法不好写 所以用ajax提交
        // $.ajax({
        //     url: '/admin/article/publish',
        //     type: 'post',
        //     data: fd,
        //     contentType: false,
        //     processData: false,
        //     success(res) {
        //         // console.log(res)
        //         if (res.code === 200) {
        //             location.href = "article_list.html"
        //         }

        //     }

        // })

    })
    //  6 草稿按钮也实现发布功能
    $('.btn-draft').click(function () {
        postArticle('')
    })
    function postArticle(state) {
        const fd = new FormData($('#form')[0])
        const content = tinyMCE.editors['articleContent'].getContent()
        fd.append('content', content)
        fd.append('state', state)
        fd.forEach((value, key) => console.log(value, key))
        $.ajax({
            url: '/admin/article/publish',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success(res) {
                // console.log(res)
                if (res.code === 200) {
                    location.href = "article_list.html"
                }
            }
        })
    }
    renderEditor()
    renderDate()
    getCategoryList()
})